<template>
	<view>
		<!-- 机房 -->
		<view class="root">
			<uni-card>
				<!-- 机房、滑轮间环境 -->
				<view class="machine-div" v-for="(item,index) in machineList" :key="item.id">
					<view class="machine">
						<view class="">
							<image :src="item.icon" mode=""></image>
							<text class="machine-name">
								{{item.msg}}
							</text>
							
						</view>
						<!-- 开关 -->
						<switch checked switch @change="switch1Change" />
					</view>
						<view class="remind">
							{{item.remind}}
						</view>
				</view>
				
			</uni-card>
			
			<!-- 备注 -->
			<uni-card>
				<view class="comment">
					 <fuck-textarea  placeholder="备注:" maxlength="100"></fuck-textarea>
				</view>
			</uni-card>
			
			<!-- 图片 -->
			<view class="upimage">
				<image class="img" src="../../../static/logo.png" mode=""></image>
				<image class="imgIcon" src="../../../static/img/straightLadder/delete.png" mode=""></image>
			</view>
			<!-- 签名 -->
			<view class="">
				
			</view>
			<button type="default">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				machineList:[
					{
						id:0,
						icon:"../../../static/img/straightLadder/show2.png",
						msg:"机房、滑轮间环境",
						remind:"清洁，门窗完好，照明正常"
						
					},
					{
						id:1,
						icon:"../../../static/img/straightLadder/show2.png",
						msg:"手动紧急操作装置",
						remind:"齐全，在指定位置"	
					},
					{
						id:3,
						icon:"../../../static/img/straightLadder/show2.png",
						msg:"驱动主机",
						remind:"运行时无异常振动和异常声响"	,
						switch:true
					},
					{
						id:4,
						icon:"../../../static/img/straightLadder/show2.png",
						msg:"制动器各销轴部位",
						remind:"动作灵活"	,
						switch:true
					},
					{
						id:5,
						icon:"../../../static/img/straightLadder/show1.png",
						msg:"制动器作为轿厢意外移动保护装置制停子系统时的自检测",
						remind:" 无此项 ",
						swtich:false
					},
					{
						id:6,
						icon:"../../../static/img/straightLadder/show2.png",
						msg:"编码器",
						remind:"清洁，安装牢固 "	
					},
					{
						id:7,
						icon:"../../../static/img/straightLadder/show2.png",
						msg:"限速器各销轴部位",
						remind:"润滑，转动灵活；电气开关正常 "	
					},
					{
						id:8,
						icon:"../../../static/img/straightLadder/show1.png",
						msg:"层门和轿门旁路装置",
						remind:"无此项 "	
					}
					
				]
			}
		},
		methods: {
			// 开关事件
			switch1Change: function (e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
			},
			switch2Change: function (e) {
				console.log('switch2 发生 change 事件，携带值为', e.target.value)
			}
		}
	}
</script>

<style scoped>
	.uni-card{
		width: 670rpx;
		/* height: 820rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		margin: 0 auto;
		border: none;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}
	/* 内容 */
	.machine-div{
		height: 150rpx;
		border-bottom: 1px solid #E2E6EF;
		line-height: 30rpx;
		
	}
	.machine{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	.machine image{
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 19rpx;
	}
	.machine-name{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #34363D;
	}
	switch{
		transform: scale(0.8,0.7)
	}
	.remind{
		height: 60rpx;
		margin-left: 55rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #989BA6;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	/* 备注 */
	.comment{
		width: 100%;
		/* height: 226rpx; */
		background: #FFFFFF;
		border-radius: 16rpx;
		border: none;
	}
	.fuck-textarea{
		border: none !important;
	}
	
	/* 上传图片 */
	.upimage{
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
		width: 670rpx;
		margin: 0 auto;
	}
	.img{
		padding: 20rpx 0;
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;	
		position: relative;
		margin-bottom:20rpx ;
	}
	.imgIcon{
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
		position: absolute;
		
		left: 210rpx;
	}
	
	/* 提交 */
	button{
		width: 670rpx;
		height: 104rpx;
		background: #017EFE;
		box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(1, 126, 254, 0.2);
		border-radius: 52rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 104rpx;
		margin-top: 100rpx;
		margin-bottom: 69rpx;
	}
</style>
